import './Child.scss';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import React, { useState } from 'react';
import { Tabs ,Select , Table, Progress  } from 'antd';
import store from '../../store/index'
import {observer} from 'mobx-react';

const Child=()=>{
// 定义设备分类占比chart
const equipmentOptions={
  credits: {  
    enabled:false  
  },
	chart: {
		spacing : [40, 0 , 40, 0],
    width:240,
    reflow:true
    
	},
	title: {
		text: '设备总数<br>1354',
		align: 'center',
		verticalAlign: 'middle',
		y:10
	},
	tooltip: {
    headerFormat: '{series.name}<br>',
		pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			allowPointSelect: false,
			cursor: 'pointer',
			dataLabels: {
				enabled: false,
				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				}
			},
      showInLegend: true,
		}
	},
	series: [{
		type: 'pie',
		name: '设备总数',
		innerSize: '50%',
		data: [
			['人脸面板', 10],
			['车辆道闸', 10],
			['智能电表', 10],
			['视屏监控', 10]
		]
	}],
  function(c) { // 图表初始化完毕后的会掉函数
    // 环形图圆心
    var centerY = c.series[0].center[1],
      titleHeight = parseInt(c.title.styles.fontSize);
    // 动态设置标题位置
    c.setTitle({
      y:centerY + titleHeight/2
    });
  }
}
// 定义标签页
const { TabPane } = Tabs;
const { Option } = Select;
function onChange(value) {
  console.log(`selected ${value}`);
}
function onSearch(val) {
  console.log('search:', val);
}
// 定义缴费柱状图
const payOptions={
  credits: {  
    enabled:false  
  },
  chart: {
		type: 'column',
    reflow:true,
    width:1000,
	},
	title: {
		text: ''
	},
	xAxis: {
		type: 'category'
	},
	yAxis: {
		title: {
			text: '单位/万元'
		}
	},
	legend: {
		enabled: false
	},
	plotOptions: {
		series: {
			borderWidth: 0,
			dataLabels: {
				enabled: true,
				// format: '{point.y:.1f}'
			}
		}
	},
	tooltip: {
		headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
		pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}万元<br/>'
	},
	series: [{
		name: '缴费信息',
		colorByPoint: true,
		data: [{
			name: '1月',
			y: 50,
		}, {
			name: '2月',
			y: 24.03,
		}, {
			name: '3月',
			y: 10.38,
		}, {
			name: '4月',
			y: 4.77,
		}, {
			name: '5月',
			y: 9,
		}, {
			name: '6月',
			y: 3,
		},
			   {
				   name: '7月',
				   y: 50,
			   },
			   {
				   name: '8月',
				   y: 20,
			   },
			   {
				   name: '9月',
				   y: 22,
			   },
			   {
				   name: '10月',
				   y: 8,
			   },
			   {
				   name: '11月',
				   y: 5,
			   },
			   {
				   name: '12月',
				   y: 10,
			   },
			  ]
	}],
}
// 定义表格标题
const columns = [
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '数量',
    dataIndex: 'num',
  },
  {
    title: '占比',
    dataIndex: 'proportion',
  },
];
// 定义表格数据
const data = [
  {
    key: '1',
    type: '工厂用电',
    num: 32,
    proportion:  <Progress percent={80}   strokeColor={{
      '0%': '#CA00D0',
      '100%': '#7A05D8', }}/>,
  },
  {
    key: '2',
    type: '工厂用煤',
    num: 42,
    proportion:  <Progress percent={90}  strokeColor={{
      '0%': '#CA00D0',
      '100%': '#7A05D8', }} />,
  },
  {
    key: '3',
    type: '员工充电',
    num: 32,
    proportion:<Progress percent={75}  strokeColor={{
      '0%': '#CA00D0',
      '100%': '#7A05D8', }} />,
  },
  {
    key: '4',
    type: '日常照明',
    num: 99,
    proportion:  <Progress percent={60}  strokeColor={{
      '0%': '#CCCB96',
      '100%': '#FE9901', }} />,
  },
  {
    key: '5',
    type: '设备未关',
    num: 99,
    proportion:  <Progress percent={80}  strokeColor={{
      '0%': '#CCCB96',
      '100%': '#FE9901', }} />,
  },
  {
    key: '6',
    type: '光伏照明',
    num: 99,
    proportion:  <Progress percent={85}  strokeColor={{
      '0%': '#CCCB96',
      '100%': '#FE9901', }} />,
  },
]; // rowSelection object indicates the need for row selection
// 定义设备图表
const errorOptions={
  credits: {  
    enabled:false  
  },
  chart: {
		type: 'areaspline',
    height:270
	},
	title: {
		text: ''
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		x: 150,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	xAxis: {
		categories: [
			'1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'
		],
	},
	yAxis: {
		title: {
			text: '报错次数'
		}
	},
	tooltip: {
		shared: true,
		valueSuffix: ' 报错次数'
	},
	plotOptions: {
		areaspline: {
			fillOpacity: 0.5
		}
	},
	series: [{
		name: '',
		data: [80, 125, 222, 128, 335, 129, 212,125, 222, 128,125, 222]
	}]
}
  return(
    <div className='overviewChild'>  
      <div className='tit'>
        <div>
          <div>
            <p>正常运行设备(台)</p>
            <div>
              <div><span>{ store.dongji.numberOfEquipmentInNormal}</span></div>
              <div><span><a href="#">查看{'>'}</a></span></div>
           </div>
          </div>
        </div>
        <div>
          <div>
            <p>年度累计缴费(元)</p>
            <div>
              <div><span>{store.dongji.annualAccumulativePayment}</span></div>
              <div><span><a href="#">查看{'>'}</a></span></div>
           </div>
          </div>
          <div>
            <p>今日进出人数(人)</p>
            <div>
              <div><span>{store.dongji.numberOfPeopleEntering}</span></div>
              <div><span><a href="#">查看{'>'}</a></span></div>
           </div>
          </div>
          <div>
            <p>今日进出车辆(辆)</p>
            <div>
              <div><span>{store.dongji.IncomingAndOutgoingToday}</span></div>
              <div><span><a href="#">查看{'>'}</a></span></div>
           </div>
          </div>
        </div>
      </div>
      <div className='middle'>
        <div>
          <div><p>设备分类占比</p></div>
          <div> <HighchartsReact  highcharts={Highcharts} options={equipmentOptions} ></HighchartsReact></div>
        </div>
  
        <div>
          <div>
            <div>
              <Tabs defaultActiveKey="1">
                <TabPane tab="物业缴费" key="1">
                </TabPane>
                <TabPane tab="公共资源"  key="2">
                </TabPane>
                <TabPane tab="车辆缴费" key="3">
                </TabPane>
                <TabPane tab="水电缴费" key="4">
                </TabPane>
              </Tabs>
            </div>
            <div>
              <div>统计频度：</div>
              <div>
                <Select   style={{width:200}}
                    showSearch
                    placeholder="请选择"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    <Option value="请选择">请选择</Option>
                    <Option value="年度">年度</Option>
                    <Option value="月度">月度</Option>
                    <Option value="季度">季度</Option>
                </Select>
              </div>
            </div> 
          </div>
          <div>
            <HighchartsReact  highcharts={Highcharts} options={payOptions} ></HighchartsReact>
          </div>       
        </div>
      </div>
      <div className='footer'>
        <div>
          <div>设备报错运营分析</div>
          <div>
            <div>
              <Table columns={columns} dataSource={data} size='small' 
              pagination={false } className='rowStyle'/>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div>设备报错次数统计</div>
            <div>
              <div>统计频度：</div>
              <div>
                <Select   style={{width:200}}
                    showSearch
                    placeholder="请选择"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    <Option value="请选择">请选择</Option>
                    <Option value="年度">年度</Option>
                    <Option value="月度">月度</Option>
                    <Option value="季度">季度</Option>
                </Select>
              </div>
            </div>
          </div>
          <div>
            <HighchartsReact  highcharts={Highcharts} options={errorOptions} ></HighchartsReact>
          </div>
          
          
        </div>
      </div>
    
    </div>
  )
}
export default observer(Child);